<template>
	<view class="container">
		<!-- 地图区域 - 占页面40% -->
		<view class="map-container" style="position: relative;">
			<map 
				id="myMap"
				class="map"
				:latitude="latitude"
				:longitude="longitude"
				:markers="markers"
				:show-location="true"
				@markertap="onMarkerTap"
			></map>
			<!-- 搜索框 -->
			<view style="top: 0; left: 0; position: absolute; z-index: 100; width: 100%;">
				<u-navbar :borderBottom="false" :placeholder="true" :background="{background: 'rgba(0,0,0,0)'}"
					:isBack="false">
				</u-navbar>
				<view
					style="font-family: Alimama ShuHeiTi, Alimama ShuHeiTi; padding: 0rpx 32rpx 20rpx 32rpx; font-size: 40rpx; font-weight: bold;">
					人力滴滴
				</view>
				<view class="search-container"
					style="width: 686rpx; border-radius: 15px;margin: auto; padding-left: 24rpx;">
					<!-- :map="{text:'shortname', value:'id'}" -->
					<uni-data-picker
						v-slot:default="{data, error}" v-model="selectedRegion" :localdata="regions"
						popup-title="请选择城市" @nodeclick="onRegionNodeClick" @change="onSelectedRegionChange">
						<view v-if="error">
							<text>！</text>
							<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#666"></u-icon>
						</view>
						<view v-else-if="data.length" class="selected">
							<!-- <view v-for="(item, index) in data" :key="index" class="selected-item"> -->
							<text>{{data[1].text}}</text>
							<u-icon style="margin-left: 8rpx;" size="20" name="arrow-down-fill"
								color="#666"></u-icon>
							<!-- </view> -->
						</view>
						<view v-else>
							<text>请选择</text>
							<u-icon style="margin-left: 8rpx;" size="20" name="arrow-down-fill"
								color="#666"></u-icon>
						</view>
					</uni-data-picker>
					<view class="search-line1" style="margin-left: 20rpx; margin-right: 20rpx;"></view>
					<!-- <view @click="toSelService">
						<text>{{selectService?selectService.name:'全部'}}</text>
						<u-icon style="margin-left: 8rpx;" size="20" name="arrow-down-fill"
							color="#666"></u-icon>
					</view>
					<view class="search-line1" style="margin-left: 20rpx;"></view> -->
					<input placeholder="搜索多种服务" v-model="searchVal" @input="changeSearch" />
					<image style="width: 40rpx; height: 40rpx; margin-right: 20rpx;"
						src="/static/home/home-search@2x.png">
					</image>
			
				</view>
			</view>
		</view>
		
		
		<!-- 商城公告 -->
		<view style="padding: 0rpx 30rpx; background-color: #fff; margin-top: 32rpx;">
			<view
				class="flex-row-start" style="height: 68rpx; padding: 0rpx 16rpx;box-sizing: border-box; border-radius: 8rpx; background-color: rgba(255, 238, 224, 1);">
				<image src="/static/home/notice1.png" style="width: 118rpx; height: 44rpx;"></image>
				<view style="margin-left: 16rpx; margin-right: 16rpx; background-color: #FC7404; width: 4rpx; height: 16rpx;"></view>
				<text style="flex: 1; font-size: 28rpx; font-weight: 500;">您的木工订单正在进行中</text>
			</view>
		</view>
		
		<!-- 服务分类 -->
		<view style="padding: 16rpx 32rpx 10rpx 32rpx;">
			<view style="display: flex;flex-wrap: wrap;">
				<view style="width: 20%; box-sizing: border-box;" @click="toGoldMenu(item.url)"
					v-for=" (item,index) in bannerArr" :key="index">
					<view style="text-align: center;margin-top: 24rpx; font-size: 0px;">
						<image mode="aspectFill" style="background: rgb(230, 230, 230); width: 72rpx;height: 72rpx;">
						</image>
						<view style="color: #333333;font-size: 28rpx; line-height: 44rpx; margin-top: 8rpx;">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 最近订单 -->
		<view style="padding: 24rpx 32rpx; 8rpx 24rpx" v-if="firstOrderShow">
			<view 
				style="padding-bottom: 24rpx;border: #0BB1EF solid 1px;border-radius: 24rpx;background: #fff;">
				<view class="" style="display: flex;align-items: baseline; padding: 18rpx 24rpx;background: #0BB1EF;
			border-radius: 24rpx 24rpx 0 0;">
					<view style="flex: 1; color: #FFFFFF; font-size: 30rpx;">
						<u-icon name="bell-fill" color="#FFFFFF" size="32"></u-icon>
						<text style="padding-left: 12rpx;">最近接单</text></text>
						<!-- <text style="padding-left: 12rpx;" v-if="remaining_transaction_time > 0 && (firstOrder.firstOrder.order_status == 0 || firstOrder.firstOrder.order_status == 13)">待支付：  <text style="color: #FFF;" v-if="remaining_transaction_time > 0 && (firstOrder.firstOrder.order_status == 0 || firstOrder.firstOrder.order_status == 13)">{{ hour }}:{{ minutes }}:{{ seconds }}</text></text> -->
					</view>
					<button style="font-size: 24rpx;">
						查看订单
					</button>
				</view>
				<view class="" style="margin-top: 26rpx;padding: 0 24rpx;display: flex;align-items: center;
			border-bottom: 1px solid #F5F5F5;padding-bottom: 22rpx;">
					<view class="order-operation-item">
						<view style="display: flex;flex-direction: row; align-items: center;"
							@click="jumpTo('/pages/users/OrderTabbar?selectedId=3')">
							<image style="width:72rpx; height: 72rpx;" src="@/static/home/dfp.png" />
							<view style="margin-left: 12rpx;font-size: 24rpx;">
								<view style="font-size: 32rpx;font-weight: bold;">2</view>
								<view style="color: #999999;">待分配</view>
							</view>
						</view>
					</view>
					<view class="" style="flex: 1;display: flex;justify-content: center;">
						<view style="display: flex;flex-direction: row; align-items: center;"
							@click="jumpTo('/pages/users/OrderTabbar?selectedId=1')">
							<image style="width:72rpx; height: 72rpx;" src="@/static/home/dbj.png" />
							<view style="margin-left: 12rpx;font-size: 24rpx;">
								<view style="font-size: 32rpx;font-weight: bold;">1</view>
								<view style="color: #999999;">待报价</view>
							</view>
						</view>
					</view>
					<view class="order-operation-item">
						<view style="display: flex;flex-direction: row; align-items: center;"
							@click="jumpTo('/pages/users/OrderTabbar?selectedId=2')">
							<image style="width:72rpx; height: 72rpx;" src="@/static/home/tksh.png" />
							<view style="margin-left: 12rpx;font-size: 24rpx;">
								<view style="font-size: 32rpx;font-weight: bold;">3</view>
								<view style="color: #999999;">退款/售后</view>
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top: 20rpx;display: flex;justify-content: space-between;padding: 0 24rpx;">
					<view>
						<text style="color: #999; font-size: 24rpx;">金额</text>
						<text
							style="color: #111111; font-size: 36rpx;font-weight: bold;">￥1.<span style="font-size: 24rpx;">00</span></text>
						<!-- <text style="color: #000; font-size: 24rpx; flex:1;font-weight: bold;">05</text> -->
					</view>
					<text style="color: #FC7404; font-size: 28rpx; font-weight: bold;">
						待服务
					</text>
				</view>
				<view style="display: flex; flex-direction: row; padding: 10rpx 24rpx; margin: 10rpx 0;">
					<view style="border-radius: 16rpx;margin-right: 16rpx;">
						<image style="width: 132rpx; height: 132rpx;border-radius: 12rpx;"
							src="../../static/logo.png">
						</image>
					</view>
					<view style="display:flex;flex-direction: column; justify-content: center;">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<view style="width:16rpx;height:16rpx;border-radius:50%;background-color: #111111;">
							</view>
							<view style="margin-left: 24rpx;font-size: 28rpx;font-weight: bold;color: #333333;">
								家政保洁(此处为需求工种)
							</view>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center; margin-top: 8rpx;">
							<view style="width:16rpx;height:16rpx;border-radius:50%;background-color:#0BB1EF;">
							</view>
							<view style="margin-left: 24rpx;display: flex;flex-direction:column;font-weight: bold;">
								<text style="font-size: 28rpx; overflow: hidden; color: #333333;
						  text-overflow: ellipsis; white-space: nowrap; width: 440rpx;">
									贵阳市南明区花果园M区8栋2单元2楼平台商铺
								</text>
								<view style="display: flex;flex-direction: row; font-size: 24rpx;">
									<text style="color: #666666; margin-right: 24rpx;">
										陈先生
									</text>
									<text style="color: #999999;">
										183****1965
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="display: flex;flex-direction: row; padding: 10rpx 24rpx;">
					<view style="flex: 1;"></view>
					<view class="hollowcss" >联系客户</view>
					<view class="solidcss" >分配服务
					</view>
				</view>
			</view>
		</view>
		
		<!-- 第一张广告 -->
		<view class="ad-container" style="margin-top: 32rpx; padding: 0rpx 32rpx; font-size: 0rpx;">
			<view @click="toAd(item.url)" v-for="(item,index) in oneAds" :key="index" style="margin-bottom: 24rpx;">
				<image :src="item.thumbimage" mode="widthFix" style="width: 100%;"></image>
			</view>
		</view>
		
		
		
		<u-gap height="24" bg-color="#F5F5F5"></u-gap>
		
		
		<u-tabbar v-model="current" :list="tabbar" active-color="#50A5F4"></u-tabbar>
	</view>
</template>

<script>
import {getTabbarConfig} from '@/common/tabbar';
import configApi from 'utils/config.js'
import {request} from 'utils/request.js'
import { homeBanner } from '@/utils/data';
import config from '@/utils/config';
export default {
	data() {
		return {
			current: 0,
			tabbar: getTabbarConfig(true),
			// categoriesList:[],
			bannerArr:homeBanner,
			firstOrderShow:true,
			
			isFixed: false,
			latitude: 39.90469,
			longitude: 116.40717,
			markers: [],
			regions:[],
			selectedRegion:undefined,
			searchVal:'',
			oneAds:[{
				thumbimage:config.appurlNewImg + '/shifu/index-b1.png',
				url:''
			},{
				thumbimage:config.appurlNewImg + '/shifu/index-b2.png',
				url:''
				
			}]
		}
	},
	onLoad() {
		this.initMap();
		this.initMarkers();
		// uni.setStorageSync('userToken', 'ea78976d6d2168445792bb21ea1a6702');
		this.jiekou();
	},
	methods: {
		jiekou(){
			// request.post({
			// 	url: '/api/master/login',
			// 	data: {
			// 		username: '18977165805',
			// 		password: '123456'
			// 	}
			// }).then(res=>{
			// 	console.log('返回用户信息：', res);
			// })
			request.getWithToken({
				url: '/master/info'
			}).then(res=>{
				console.log('返回用户信息：', res);
				
			})
			
			return;
			request.post({
				url: '/master.master/appLogin',
				data: {
					username: '18977165805',
					password: '123456'
				}
			}).then(res=>{
				console.log('返回用户信息：', res);
			})
			// request.postWithToken({
			// 	url: '/user/third'
			// }).then(res=>{
			// 	console.log('返回用户信息：', res);
			// 	if(res.code == 1){
			// 		this.userinfo = res.data.user;
			// 		if(res.data.user){
			// 			this.isLogin = true;
			// 		}else{
			// 			this.isLogin = false;
			// 		}
			// 	}
			// })
		},
		initRegion() {
			let self = this;
			// commonApi.getRegionList().then(res => {
			// 	console.log("rgs", res);
			// 	self.regions = res;
			// });
		},
		onSelectedRegionChange(e) {
			uni.setStorageSync("lastRegionCode", this.selectedRegion);
		},
		onRegionNodeClick(e) {
			let self = this;
			commonApi.getRegion({
				code: this.selectedRegion,
				lng: this.longitude,
				lat: this.latitude
			}).then(res => {
				self.selectedRegion = res.id;
				uni.setStorageSync("lastRegionCode", self.selectedRegion);
				self.longitude = res.lng;
				self.latitude = res.lat;
				self.dataList();
			});
		},
		initMap() {
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					this.initMarkers();
				},
				fail: (err) => {
					console.log('获取位置失败:', err);
					uni.showToast({
						title: '获取位置失败，使用默认位置',
						icon: 'none'
					});
				}
			});
		},
		initMarkers() {
			// 中心点标记（用户当前位置）
			const centerMarker = {
				// id: 1,
				// latitude: this.latitude,
				// longitude: this.longitude,
				// iconPath: '/static/location.png',
				// width: 30,
				// height: 30,
				// title: '当前位置'
			};
		  
			// 附近的师傅标记（2-3个）
			const masterMarkers = [
				// {
				// 	id: 2,
				// 	latitude: this.latitude + 0.01,
				// 	longitude: this.longitude + 0.01,
				// 	iconPath: '/static/master.png',
				// 	width: 25,
				// 	height: 25,
				// 	title: '张师傅（5.0分）',
				// 	callout: {
				// 		content: '张师傅\n5.0分\n距离您1.2km',
				// 		color: '#333',
				// 		fontSize: 12,
				// 		borderRadius: 5,
				// 		bgColor: '#fff',
				// 		padding: 5,
				// 		display: 'ALWAYS'
				// 	}
				// },
				// {
				// 	id: 3,
				// 	latitude: this.latitude - 0.01,
				// 	longitude: this.longitude - 0.01,
				// 	iconPath: '/static/master.png',
				// 	width: 25,
				// 	height: 25,
				// 	title: '李师傅（4.8分）',
				// 	callout: {
				// 		content: '李师傅\n4.8分\n距离您0.8km',
				// 		color: '#333',
				// 		fontSize: 12,
				// 		borderRadius: 5,
				// 		bgColor: '#fff',
				// 		padding: 5,
				// 		display: 'ALWAYS'
				// 	}
				// }
			];
			this.markers = [centerMarker, ...masterMarkers];
		},
		onMarkerTap(e) {
			const markerId = e.markerId;
			const marker = this.markers.find(m => m.id === markerId);
			if (marker) {
				uni.showToast({
					title: `点击了: ${marker.title}`,
					icon: 'none'
				});
			}
		},
		onImageClick(index) {
			uni.showToast({
				title: `点击了: ${this.images[index].title}`,
				icon: 'none'
			});
		}
	}
}
</script>

<style lang="less">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100%;
	}

	/* 地图区域样式 - 占页面40% */
	.map-container {
		height: 40vh;
		width: 100%;
		position: relative;
		overflow: hidden;
	}

	.map {
		width: 100%;
		height: 100%;
	}
	
	.hollowcss {
		color: #909399;
		border: 2rpx solid #909399;
		border-radius: 10rpx;
		padding: 16rpx 0rpx;
		width: 80px;
		text-align: center;
		margin-left: 24rpx;
	}
	
	.solidcss {
		color: #fff;
		border: 2rpx solid #0BB1EF;
		background: #0BB1EF;
		border-radius: 10rpx;
		padding: 16rpx 0rpx;
		width: 80px;
		text-align: center;
		margin-left: 24rpx;
	}

	/* 图片魔方区域样式 */
	.image-cube-container {
		/* margin-top: -40rpx; */
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 10;
	  /* flex: 1; */
	}

	.image-cube-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		height: 100%;
	}

	.image-item {
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		pointer-events: auto;
	}

	.cube-image {
		width: 100%;
		height: 100%;
	}

	.image-title {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
		color: white;
		padding: 20rpx;
		font-size: 28rpx;
	}

	/* 左侧图片 */
	.left-image {
		width: 30%;
		height: 150rpx;
		margin-bottom: -20rpx;
		z-index: 1;
	}

	/* 中间凸出图片 */
	.center-image {
		width: 30%;
		height: 180rpx;
		z-index: 10;
		margin-bottom: -20rpx;
	}

	.center-image-overlap {
		position: relative;
		top: -20rpx;
		height: calc(100% + 20rpx);
	}

	/* 右侧图片 */
	.right-image {
		width: 30%;
		height: 150rpx;
		margin-bottom: -20rpx;
		z-index: 1;
	}
	
	
	.search-container {
		display: flex;
		flex-direction: row;
		margin: 0rpx 30rpx 0 30rpx;
		border: 1rpx solid #CCC;
		border-radius: 30rpx;
		line-height: 80rpx;
		align-items: center;
		background-color: #FFF;
		box-shadow: 5rpx 10rpx 15rpx 1rpx #DDD;
	
		input {
			font-size: 30rpx;
			padding: 0 20rpx;
			flex: 1;
			margin-left: 20rpx;
			border-left: 6rpx solid #CCC;
		}
	}
	
	.search-container>text:first-child {
		font-weight: bold;
		padding: 0 20rpx;
	}
</style>